<template>
  <div class="main-box">
    <div class="search-box">
      <el-row :gutter="20">
        <el-col :span="10"><div class="grid-content bg-purple">
          <el-input v-model="params.username" placeholder="请输入姓名"></el-input>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple">
          <el-select v-model="params.sex" placeholder="请选择" style="margin-left: 20px;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10"><div class="grid-content bg-purple">
          <div class="block">
            <el-date-picker
              v-model="params.regdate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </div></el-col>
        <el-col :span="14"><div class="grid-content bg-purple">
          <el-button type="primary" icon="el-icon-search" style="margin-left: 50px;" @click="handleSearch">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh-left" @click="reset">重置</el-button>
        </div></el-col>
      </el-row>
    </div>
    <el-table
        :data="formattedTableData"
        stripe
        style="width: 100%">
        <el-table-column
        prop="name"
        label="姓名"
        width="180">
        </el-table-column>
        <el-table-column
        prop="sex"
        label="性别"
        width="180">
        </el-table-column>
        <el-table-column
        prop="address"
        label="地址">
        </el-table-column>
        <el-table-column
        prop="regdate"
        width="180"
        label="注册时间">
        </el-table-column>
        <el-table-column
        prop="count"
        width="180"
        label="违规次数">
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        >
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">
              {{scope.row.isDelete == 0 ? '禁用' : '恢复'}}
            </el-button>
        </template>
        </el-table-column>
    </el-table>
     <!-- 分页器 -->
     <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :current-page="pageInfo.pageNum"
        @current-change="handleCurrentChange"
        :page-size="pageInfo.pageSize"
        :hide-on-single-page="true"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {SearchUser,DeleteUser} from '@/request/api'
export default {
  name: 'adminUser',
  data(){
    return{
        // value:true,
        username:'',
        options:[
          {
            value: 0,
            label: '女'
          },{
            value: 1,
            label: '男'
          }
        ],
        checked:'',
        date:'',
        pageInfo:{
          
        },
        params:{
          pageNum:1,
          username:'',
          sex:null,
          regdate:'',
        },
        tableData:[],
        delParams:{
          id:''
        }
        // isDelete:true
    }
  },
  computed:{
    formattedTableData(){
      return this.tableData.map(item => {
        item.sex = item.sex === 0 ? '女' : '男';
        // item.isDelete = item.isDelete === 0 ? true : false ; // 假设0代表正常，1代表已注销
        return item;
      })
    },
  },
  methods:{
    async handleCurrentChange(index){
      this.params.pageNum = index
      // 发请求
      let res = await SearchUser(this.params)
      this.pageInfo=res.data.data
      this.tableData = res.data.data.list
    },
    async handleSearch(){
      this.params.pageNum = 1
      let res = await SearchUser(this.params)
      this.pageInfo=res.data.data
      this.tableData = res.data.data.list
    },
    reset(){
      this.params={}
      this.params.pageNum = 1
    },
    async handleClick(row){
      console.log("row",row)
      this.delParams.id = row.userid
      let res = await DeleteUser(this.delParams)
      if(res.data.state == 200){
        // 修改按钮
        row.isDelete = !row.isDelete
      }
    }
  },
  async created(){
    let res = await SearchUser(this.params)
    this.pageInfo=res.data.data
    this.tableData = res.data.data.list
  }
}
</script>

<style scoped>
.main-box{
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.el-row {
    margin-bottom: 20px;
    /* &:last-child {
      margin-bottom: 0;
    } */
  }
  .el-col {
    border-radius: 4px;
  }
 
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
  }
  .search-box{
    width: 500px;
  }
  .block{
    margin: 0 auto;
    text-align: center;
  }
</style>
